<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>UC</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			img{
				vertical-align: bottom;
			}
			.w{
				width: 986px;
				margin: 0 auto;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix::after,.clearfix::before{
				content: "";
				display: table;
			}
			.clearfix::after{
				clear: both;
			}
			li{
				/* 去除小圆点 */
				list-style: none;
			}
			a{
				/* 去除下划线 */
				text-decoration: none;
			}
			
			/* header区 */
			.current{
				border-bottom: 3px solid #fb8b7f;
			}
			header{
				width: 100%;
				position: fixed;
				height: 70px;
				background-color: white;
			}
			.logo{
				padding: 15px 0 12px 0;
			}
			.nav{
			    padding-top: 5px;
				position: relative;
			}
			/* 使二级导航的文字在一行 */
			.nav >li{
				width: 60px;
				/* 不能用padding设置间距,在盒子里面,会使下划线延长 */
				/* padding-right: 32px; */
				margin-right: 32px;
			}
			.nav li:hover{
				/* 点击一级导航时下划线的颜色 */
				border-bottom: 3px solid deeppink;
			}
			.nav a{
				display: block;
				text-align: center;
				font-size: 20px;
				color: #464259;
				/* 如果不设置行高,下划线会挨着字体 */
				line-height: 62px;	
			}
			.subnav{
				display: none;
				position: absolute;
			}
			.subnav li:hover{
				/* 点击二级导航时文字颜色变化 */
				background-color: palevioletred;
			}
			.nav li:hover .subnav{
				/* 二级导航出现:在点击一级导航的基础上 */
				display: block;
			}
			.subnay a{
				color: black;
				line-height: 20px;
				font-size: 16px;	
			}
			
			/* banner区 */
			.banner{
				height: 400px;
				background: #333333 url(./img/banner.jpg) no-repeat center 0;
			}
			
			/* main区 */
			.main{
				height: 558px;
			}
			.icons{
				height: 145px;
				position: relative;
			}
			.icon{
				width: 138px;
				padding-top: 58px;
				background: url(./img/icon.png)no-repeat 49px 21px;
			}
			.icon:nth-child(2){
				background-position: -90px 21px;
			}
			.icon:nth-child(3){
				background-position: -228px 21px;
				position: relative;
			}
			.icon:nth-child(3)::before{
				content:"";
				width: 23px;
				height: 11px;
				background: url(./img/icon.png)-140px -280px;
				position: absolute;
				top: 15px;
				left: 82px;
			}
			.icon:nth-child(4){
				background-position: -366px 21px;
				position: relative;
			}
			.icon:nth-child(4)::before{
				content:"";
				width: 23px;
				height: 11px;
				background:url(./img/icon.png)-140px -280px;
				position: absolute;
				top: 15px;
				left: 82px;
			}
			.icon:nth-child(5){
				background-position: -504px 21px;
			}
			.icon:nth-child(6){
				background-position: -642px 21px;
			} 
			.icon:nth-child(n):hover{
				background-position: -90px -99px ;
			}
			.icon a{
				display: block;
				font-size: 11px;
				line-height: 81px;
				text-align: center;
				color:#352042;
			}
			.twocode{
				background: url(./img/twocode.png)no-repeat;
				width: 128px;
				font-size: 11px;
				line-height: 71px;
				padding-top: 106px;
				text-align: center;
				position:absolute;
				top: -32px;
				right: -4px;
			}
			.news{
				height: 413px;
				border-top: 1px solid #efefef;
			}
			.new{
				width: 290px;
				height: 120px;
			}
			.new:nth-child(n){
				padding-right: 58px; 
				/* margin-right: 58px; */
			}
			.new:nth-child(3){
				padding-right: 0;
			}
			.title{
				padding-top: 42px;
				padding-bottom: 20px;
			}
			h4{
				font-size: 20px ;
				color: #5c5859; 
			}
			.title a{
				position: relative;
				font-size: 12px;
				padding-right: 13px;
				padding-top: 5px;
				color: #5c5859;	
			}
			.title a::before{
				content:"";
				width: 6px;
				height: 6px;
				border: 2px solid black;
				border-left-color: transparent;
				border-bottom-color: transparent;
				transform: rotate(45deg);
				position: absolute;
				top: 10px; 
				left: 24px; 
			}
			.word1{
				padding-top: 120px;
				background: url(./img/activity_pic.jpg)no-repeat;
			}
			.word1 a{
				font-family: "黑体";
				line-height: 34px;
				font-size: 14px ;
				display: block;
				text-align: center;
				color: #5c5859;
				background-color: #f2f2f2;
				margin-bottom: 9px;
			}
			.word2{
				/* 给图片留间距 */
				padding-top: 120px;
				background: url(./img/news_pic.jpg)no-repeat;
			}
			.word2 a{
				font-family: "黑体";
				line-height: 34px;
				font-size: 14px ;
				display: block;
				text-align: center;
				color: #5c5859;
				background-color: #f2f2f2;
				margin-bottom: 9px;
			}
			.word3{
				padding-top: 120px;
				background: url(./img/community_pic.jpg)no-repeat;
			}
			.word3 a{
				font-family: "黑体";
				line-height: 34px;
				font-size: 14px ;
				display: block;
				text-align: center;
				color: #5c5859;
				background-color: #f2f2f2;
				margin-bottom: 9px;
			}
			.new ul a{
				margin-top: 6px;
				font-size: 14px;
				line-height:28px ;
				color: #5c5859;
			}
			footer{
				height: 520px;
				background-color: #333333;
			}
			
			.footer1{
				padding-top: 50px;
				height: 275px;
				position: relative;
			}
			.l h3{
				font-size: 13px;
				color: #b8b8bf;
			}
			.l a{
				font-size: 12px;
				line-height: 18px;
				color: #b8b8bf;
				margin-right: 100px;
			}
			.r{
				height: 24px;
				padding-left: 30px;
			}
			.r h3{
				font-size: 13px;
				color: #b8b8bf;
				line-height: 22px;
			}
			.r h3::before{
				content:"";
				width: 17px;
				height: 18px;	
				position: absolute;
				top: 54px;
				left: 807px;
				background: url(./img/icon.png) 0 -292px no-repeat;
			}
			.r h3::after{
				content:"";
				width: 17px;
				height: 18px;
				position: absolute;
				top: 54px;
				left: 902px;
				background: url(./img/icon.png) -30px -297px no-repeat;
			}
			.bd{
				padding-left: 30px;
				height: 24px;
				width: 108px;
				border: 1px solid #444444;
			}
			.r a{
				padding-top: 13px;
				padding-left: 30px;
				font-size: 12px;
				line-height: 17px;
				color: #b8b8bf;
			}
			/* .fod{
				position: relative;
			} */
			.fod::before{
				content:"";
				background: url(./img/icon.png) 0 -320px no-repeat;
				position: absolute;
				top: 80px;
				left: 804px;
				width: 17px;
				height: 18px;	
			}
		 	.fod:nth-child(2)::before{
				background-position: 0 -344px;
				top: 82px;
			}
			.fod:nth-child(3)::before{
				background-position: 0 -372px;
				top: 102px;
			}
			.fod:nth-child(4)::before{
				background-position: 0 -397px;
				top: 132px;
			}
			.fod:nth-child(5)::before{
				content:"";
				background: url(./img/icon.png) 0 -422px no-repeat;
				position: absolute;
				top: 162px;
				left: 804px;
				width: 17px;
				height: 18px;
			}
			.fod:nth-child(6)::before{
				content:"";
				background: url(./img/icon.png) 0 -448px no-repeat;
				position: absolute;
				top: 184px;
				left: 804px;
				width: 17px;
				height: 18px;
			}
			.fod:hover::before{
				
				background-position: -25px -320px;
			}
			.fod:nth-child(2):hover::before{
				
				background-position: -25px -344px;
			}
			.footer2{
				height: 78px;
				border-top: 1px dashed #66665e;
				border-bottom: 1px dashed #66665e;
			}
			.footer2 a{
				line-height: 37px;
				font-size: 12px;
				color: #b8b8bf;
			}
			.footer2 div:nth-child(1){
				border-bottom: 1px dashed #66665e;
			}
			h1{
				font-size: 13px;
				line-height: 37px;
				color:#66665e ;
			}
			.footer3{
			height: 117px;
			}
			.footer_l{
				width: 560px;
			}
			.footer_l div:nth-child(1){
				
			padding-top: 30px;
			padding-bottom: 53px;
			}
			p{
				width: 390px;
				padding-left: 16px;
				padding-top: 24px;
				font-size: 12px;
				line-height: 18px;
				color:#66665e ;
				
			}
			.footer_r{
				padding-top: 27px;
			}
			.footer_r div:nth-child(n){
				padding-right: 20px;
			}
			
		</style>
	</head>
	<body>
		<header>
			<div class="w clearfix">
				<div class="fl logo"><img src="./img/uclogo.png" alt=""></div>
				<ul class="fr nav <!-- clearfix -->">
					<li class="fl current"><a href="">首页</a></li>
					<li class="fl"><a href="">下载</a>
					<ul class="subnav">
						<li><a href="">手机UC</a></li>
						<li><a href="">电脑浏览器</a></li>
						<li><a href="">TV浏览器</a></li>
					</ul></li>
					<li class="fl"><a href="">公司</a></li>
					<li class="fl"><a href="">合作</a></li>
					<li class="fl"><a href="">社区</a></li>
					<li class="fl"><a href="">帮助</a></li>
				</ul>
			</div>
		</header>
		<div class="banner"></div>
		<div class=" main">
			<div class="w icons">
				<div class="fl icon"><a href="">Android版下载</a></div>
				<div class="fl icon"><a href="">iPhone版下载</a></div>
				<div class="fl icon"><a href="">电脑版下载</a></div>
				<div class="fl icon"><a href="">Pad版下载</a></div>
				<div class="fl icon"><a href="">TV版下载</a></div>
				<div class="fl icon"><a href="">WP版下载</a></div>
				<div class="twocode">手机扫一扫下载</div>
			</div>
			
			<div class="w news">
				<div class="fl new">
					<div class="title clearfix">
						<h4 class="fl">社区热帖</h4>
						<a href="" class="fr">更多</a>
					</div>
					<div class="word1"><a href="">上uc.cn，下载抢100M流量礼包</a></div>
						<ul>
							<li><a href="">你没得到奖，因为你没有摇一摇</a></li>
							<li><a href="">第二季环保袋活动开放申请啦</a></li>
							<li><a href="">最壕UC微信号，天天送大奖</a></li>
							<li><a href="">UC省钱攻略大曝光：6000万红包等你来！</a></li>
							<li><a href="">手机浏览器成移动上网第一入口 UC稳居市场</a></li>
						</ul>
					
				</div>
				<div class="fl new">
					<div class="title clearfix">
						<h4 class="fl">活动专区</h4>
						<a href="" class="fr">更多</a>	
					</div>
					<div class="word2"><a href="">不断寻找合伙人</a>	</div>
						<ul>
							<li><a href=""> 神马搜索与《梦想星搭档》展开娱乐内</a></li>
							<li><a href=""> UC九游11月报告：《乱斗西游》成MOBA手</a></li>
							<li><a href=""> UC浏览器“抢票帮”颠覆传统 亲朋好友</a></li>
							<li><a href="">UC浏览器新版造就极致视频体验</a></li>
							<li><a href=""> 手机浏览器使用频率仅次于即时通讯</a></li>
						</ul>
				
				</div>
				<div class="fl new">
					<div class="title clearfix">
						<h4 class="fl">新闻动态</h4>
						<a href="" class="fr">更多</a>
					</div>
					<div class="word3"><a href="">UC浏览器抢票帮正式发布！团结一切力量</a></div>
						<ul>
							<li><a href=""> UC浏览器Android版10.0皮肤制作教程</a></li>
							<li><a href="">年底求加薪技巧！哥拼的是拍马屁的技巧</a></li>
							<li><a href=""> UC浏览器抢票帮——召唤朋友一起帮你抢</a></li>
							<li><a href="">UC姐神秘面容首次曝光，多图胆小慎入</a></li>
							<li><a href="">【uc记者团】2015年春节回家 攻略</a></li>
						</ul>
					
				</div>
			</div>
		</div>
		<footer>
			<div class="w footer1">
				<div class="l">
					<div class="fl"><h3>UC浏览器</h3>
						<ul>
							<li><a href="">产品动态</a></li>
							<li><a href="">功能介绍</a></li>
							<li><a href="">安卓浏览器</a></li>
							<li><a href="">iPhone浏览器</a></li>
							<li><a href="">电脑浏览器</a></li>
							<li><a href="">WP浏览器</a></li>
							<li><a href="">iPad浏览器</a></li>
							<li><a href="">aPad浏览器</a></li>
							<li><a href="">TV浏览器</a></li>
							<li><a href="">塞班浏览器</a></li>
						</ul>
					</div>
					<div class="fl"><h3>公司</h3>
						<ul>
							<li><a href="">公司首页</a></li>
							<li><a href="">公司概况</a></li>
							<li><a href="">公司动态</a></li>
							<li><a href="">管理团队</a></li>
							<li><a href="">企业文化</a></li>
							<li><a href="">粉丝专区</a></li>
							<li><a href="">荣誉之旅</a></li>
							<li><a href="">联系我们</a></li>
							<li><a href="">投资者</a></li>
							<li><a href="">UC闪屏</a></li>
						</ul>
					</div>
					<div class="fl"><h3>其他产品</h3>
						<ul>
							<li><a href="">UC九游</a></li>
							<li><a href="">PP助手</a></li>
							<li><a href="">神马搜索</a></li>
							<li><a href="">UC云</a></li>
							<li><a href="">U点充值</a></li>
							<li><a href="">用户中心</a></li>
							<li><a href="">体验中心</a></li>
							<li><a href="">帮助中心</a></li>
							<li><a href="">意见反馈</a></li>
						</ul>
						
					</div>
					<div class="fl"><h3>开放合作</h3>
						<ul>
							<li><a href="">游戏开放平台</a></li>
							<li><a href="">运营商合作</a></li>
							<li><a href="">终端厂商合作</a></li>
							<li><a href="">互联网合作</a></li>
							<li><a href="">开发者中心</a></li>
							<li><a href="">战略投资</a></li>
						</ul>
					</div>
					<div class="fl"><h3>招聘</h3>
						<ul>
							<li><a href="">社会招聘</a></li>
							<li><a href="">人才招聘</a></li>
							<li><a href="">校园招聘</a></li>
							<li><a href="">实习生招聘</a></li>
							<li><a href="">内部推荐</a></li>
							<li><a href="">走进UC</a></li>
						</ul>
					</div>
				</div>
				<div class="r clearfix">
					<div class="fl"><h3 class="bd">中文版</h3>
						<ul>
							<li class="fod"><a href="">手机站</a></li>
							<li class="fod"><a href="">Pad站</a></li>
							<li class="fod"><a href="">TV站</a></li>
							<li class="fod"><a href="">UC浏览器微博</a></li>
							<li class="fod"><a href="">UC浏览器贴吧</a></li>
							<li class="fod"><a href="">UC浏览器微信</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="w footer2">
				<div><a href="">阿里巴巴集团|淘宝网|天猫|聚划算|全球速卖通|阿里巴巴国际交易市场|1688|阿里妈妈|阿里旅行·去啊|阿里云计算|YunOS|阿里通信|万网|高德</a></div>
				<div><h1 class="fl">友情链接：</h1><a href="" class="fl">手机游戏|网易科技|dospy智能手机网|历趣手机软件|威锋网|小说全搜|IT之家|前瞻网|手机软件下载|pc6下载|KK语音|安卓市场|机锋网</a></div>
			</div>
			<div class=" w footer3 ">
				<div class="footer_l ">
					<div class="fl"><img src="./img/logo_company.png" alt=""></div>
					<div class="fl"><p>2004-2014 uc.cn 版权所有 网络文化经营许可证：文网文[2010]176号
					中华人民共和国互联网药品信息服务资格证：（粤）-非经营性-2011-0120
					增值电信业务经营许可证: 粤B2-20070379 粤ICP备09210879号</p></div>
				</div>
				<div class=" fr footer_r">
					<div class="fl"><img src="./img/qa_wen.png" alt=""></div>
					<div class="fl"><img src="./img/gs.png" alt=""></div>
					<div class="fl"><img src="./img/knet_cn.png" alt=""></div>
					<div class="fl"><img src="./img/anva.png" alt=""></div>
				</div>
				
			</div>
		</footer>
	</body>
</html>
